﻿<Page
    x:Name="pageRoot"
    x:Class="Fabrikam.Client.SplitPage"
    DataContext="{Binding Source={StaticResource SplitPageViewModel}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Fabrikam.Client"
    xmlns:data="using:Fabrikam.Client.Data"
    xmlns:common="using:Fabrikam.Client.Common"
    xmlns:conv="using:Fabrikam.Client.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <conv:ColorLevelConverter x:Key="ColorLevelConverter" />
        <conv:DateTimeConverter x:Key="DateTimeConverter" />

    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Background="#585858">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="primaryColumn" Width="420"/>
            <ColumnDefinition x:Name="secondaryColumn" Width="*"/>
        </Grid.ColumnDefinitions>

        <Image Stretch="Uniform" Source="Assets/StartScreenBottom.png" Grid.Row="1" Grid.ColumnSpan="2" IsHitTestVisible="False"
						VerticalAlignment="Bottom" HorizontalAlignment="Left"  />

        <Image Stretch="None" Source="Assets/StartScreenUpRight.png" Grid.Row="0"  Grid.ColumnSpan="2"
						VerticalAlignment="Top" HorizontalAlignment="Right"  />

        <!-- Back button and page title -->
        <Grid x:Name="titlePanel" Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        Style="{StaticResource NavigationBackButtonNormalStyle}"
                        VerticalAlignment="Top"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
            <TextBlock x:Name="pageTitle" Text="{Binding ServiceTicket.ServiceTicket.Title}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,0,40"/>

            <StackPanel Orientation="Horizontal" Grid.Column="1" Margin="0,45,0,0" VerticalAlignment="Top" HorizontalAlignment="Right" >

                <AppBarButton x:Name="addButton" IsCompact="True" Margin="0,0,20,0" 
                              Command="{Binding AddCommand}" 
                              Grid.Column="1" VerticalAlignment="Center" Icon="Add" >
                </AppBarButton>

                <AppBarButton x:Name="editButton" Margin="0,0,20,0"
                              IsCompact="True" Command="{Binding EditCommand}" 
                              Grid.Column="1" VerticalAlignment="Center" Icon="Edit" >
                </AppBarButton>
                <AppBarButton x:Name="deleteButton" Margin="0,0,20,0"
                              IsCompact="True" Command="{Binding DeleteCommand}" 
                              Grid.Column="1" Click="deleteButton_Click"
                              VerticalAlignment="Center" Icon="Delete" >
                </AppBarButton>
            </StackPanel>
        </Grid>

        <!-- Vertical scrolling item list -->
        <ListView
            Name="itemListView"
            AutomationProperties.AutomationId="ItemsListView"
            AutomationProperties.Name="Items"
            TabIndex="1"
            Grid.Row="1"
            Margin="0,-10,10,0"
            Padding="120,0,0,60"
            SelectedItem="{Binding ServiceTicket, Mode=TwoWay}"
            ItemsSource="{Binding ServiceTickets}"
            IsSwipeEnabled="False"
            SelectionChanged="ItemListView_SelectionChanged" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="6" Height="140" Background="{Binding ServiceTicket.StatusValue, Converter={StaticResource ColorLevelConverter}}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="80" />
                            <RowDefinition Height="60" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Row="0" >
                            <TextBlock Text="{Binding ServiceTicket.Description}" 
                                       TextTrimming="WordEllipsis" 
                                       Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" 
                                       Style="{StaticResource BaseTextBlockStyle}" 
                                       Margin="15,0,0,0" FontWeight="SemiBold" VerticalAlignment="Stretch" />
                        </Border>
                        <StackPanel VerticalAlignment="Bottom" Grid.Row="1"  Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
                            <TextBlock Text="{Binding ServiceTicket.Title}" 
                                       TextTrimming="WordEllipsis"
                                       Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" 
                                       Margin="15,0,0,0" FontWeight="SemiBold" FontFamily="Global User Interface"/>
                            <TextBlock Text="{Binding ServiceTicket.Opened, Converter={StaticResource DateTimeConverter}}" 
                                       Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" 
                                       Style="{StaticResource BaseTextBlockStyle}" 
                                       TextWrapping="NoWrap" Margin="15,0,15,10" FontSize="12"
                                       HorizontalAlignment="Right"
                                       
                                       />
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListView.ItemContainerStyle>

        </ListView>

        <!-- Details for selected item -->
        <ScrollViewer
            x:Name="itemDetail"
            AutomationProperties.AutomationId="ItemDetailScrollViewer"
            Grid.Column="1"
            Grid.Row="1"
            Padding="60,0,66,0"
            DataContext="{Binding}"
            HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
            ScrollViewer.HorizontalScrollMode="Disabled" ScrollViewer.VerticalScrollMode="Enabled"
            ScrollViewer.ZoomMode="Disabled">

            <Grid x:Name="itemDetailGrid" Margin="0,0,0,50">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" MinHeight="50"/>
                    <RowDefinition Height="Auto" MinHeight="50"/>
                    <RowDefinition Height="Auto" MinHeight="50"/>
                    <RowDefinition Height="Auto" MinHeight="50"/>
                    <RowDefinition Height="Auto" MinHeight="50"/>
                    <RowDefinition Height="Auto" MinHeight="50"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="200"/>
                </Grid.ColumnDefinitions>

                <Border Grid.Row="0" Margin="0" Grid.ColumnSpan="4" Background="{Binding ServiceTicket.ServiceTicket.StatusValue, Converter={StaticResource ColorLevelConverter}}">
                </Border>

                <TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}" />
                <TextBlock x:Name="itemTitle" Margin="0,0,0,10" Text="{Binding ServiceTicket.ServiceTicket.Title}" Grid.Column="1"
                           Grid.ColumnSpan="2"
                           Style="{StaticResource SubheaderTextBlockStyle}"  FontWeight="Bold" />

                <TextBlock Text="Customer" Grid.Row="1"  Style="{StaticResource TitleTextBlockStyle}" />

                <StackPanel Grid.Row="1" Grid.Column="1" DataContext="{Binding Source={StaticResource SplitPageViewModel}}">

                    <StackPanel Orientation="Horizontal" Margin="0,0,0,10" >
                        <TextBlock x:Name="itemName" Margin="0,0,0,0" Text="{Binding ServiceTicket.Customer.FirstName}" 
                               Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="Bold" />
                        <TextBlock x:Name="itemLastName" Margin="10,0,0,0" Text="{Binding ServiceTicket.Customer.LastName}" 
                               Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="Bold" />
                    </StackPanel>
                    <TextBlock Margin="0,0,0,0" Text="{Binding ServiceTicket.Customer.Address_Street}" 
                               Style="{StaticResource BaseTextBlockStyle}"/>
                    <TextBlock Margin="0,0,0,0" Text="{Binding ServiceTicket.Customer.Address_City}" 
                               Style="{StaticResource BaseTextBlockStyle}"/>
                    <StackPanel Orientation="Horizontal"  >

                        <TextBlock Margin="0,0,0,0" Text="{Binding ServiceTicket.Customer.Address_Zip}" 
                               Style="{StaticResource BaseTextBlockStyle}"/>
                        <TextBlock Margin="10,0,0,0" Text="{Binding ServiceTicket.Customer.Address_State}" 
                               Style="{StaticResource BaseTextBlockStyle}"/>
                    </StackPanel>

                </StackPanel>

                <Image x:Name="itemImage" DataContext="{Binding Source={StaticResource SplitPageViewModel}}" Source="{Binding ServiceTicket.Image}" Grid.Row="1" Grid.Column="2">
                </Image>

                <TextBlock Text="Description" Grid.Row="2"  Style="{StaticResource TitleTextBlockStyle}" />

                <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ServiceTicket.ServiceTicket.Description}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" 
                           FontWeight="SemiBold" VerticalAlignment="Stretch" />


                <TextBlock Text="Opened" Grid.Row="3"  Style="{StaticResource TitleTextBlockStyle}" />
                <TextBlock x:Name="itemSubtitle" Grid.Row="3" Grid.Column="1" Margin="0" 
                           Text="{Binding ServiceTicket.ServiceTicket.Opened, Converter={StaticResource DateTimeConverter}}" Style="{StaticResource SubtitleTextBlockStyle}"/>

                <TextBlock Text="Closed" Grid.Row="4"  Style="{StaticResource TitleTextBlockStyle}" />
                <TextBlock Grid.Row="4" Grid.Column="1" Margin="0" 
                           Text="{Binding ServiceTicket.ServiceTicket.Closed, Converter={StaticResource DateTimeConverter}}" Style="{StaticResource SubtitleTextBlockStyle}"/>

            </Grid>
        </ScrollViewer>
        <VisualStateManager.VisualStateGroups>
            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ViewStates">
                <VisualState x:Name="PrimaryView" />
                <VisualState x:Name="SinglePane">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="secondaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,60"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <!--
                    When an item is selected and only one pane is shown the details display requires more extensive changes:
                     * Hide the master list and the column it was in
                     * Move item details down a row to make room for the title
                     * Move the title directly above the details
                     * Adjust padding for details
                 -->
                <VisualState x:Name="SinglePane_Detail">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="primaryColumn" Storyboard.TargetProperty="Width">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.Row)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="(Grid.RowSpan)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="titlePanel" Storyboard.TargetProperty="(Grid.Column)">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetailGrid" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,60"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemDetail" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="120,0,90,0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</Page>
